<template>
    <div class="common-layout">
        <el-container>
            <el-header style="height: 35px">
                <span class="title">
                    <el-icon>
                        <House />
                    </el-icon>
                    订单管理/<span style="color: #0098FF;">订单</span></span>
            </el-header>
            <el-main>
                <div class="main">
                    <div style="float: left;margin-left: 5px">
                        <el-button type="primary" @click="KD">开单</el-button>
                        <!-- <el-button plain>批量操作</el-button>
                        <el-button plain>导入</el-button>
                        <el-button plain>导出</el-button>
                        <el-button plain>打印</el-button> -->
                    </div>
                    <br />
                    <div style="margin-top: 15px;float: left;margin-left: -60px">
                        订单状态:&nbsp;&nbsp;
                        <el-select v-model="ddzt" placeholder="请选择" style="width: 240px">
                            <el-option v-for="item in DDZTvalue" :key="item.value" :label="item.dict_label"
                                :value="item.dict_value" />
                        </el-select>
                        &nbsp;&nbsp;始发地:&nbsp;&nbsp;
                        <el-cascader v-model="sfd" :options="Addressvalue" />
                        &nbsp;&nbsp;目的地:&nbsp;&nbsp;
                        <el-cascader v-model="mdd" :options="Addressvalue" /><br />
                        <p style="float: left;margin-left: 2px;margin-top: 15px;">
                            下单日期:&nbsp;&nbsp;
                            <el-date-picker v-model="xsrq" type="daterange" range-separator="To"
                                start-placeholder="请选择日期" end-placeholder="请选择日期" :size="size"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                            <el-input v-model="ss" style="width: 240px;margin-left: 10px;" placeholder="请输入客户名称搜索"
                                :prefix-icon="Search" />&nbsp;&nbsp;
                            <el-button type="primary" @click="Get">搜索</el-button>
                            <el-button plain @click="CZ">重置</el-button>
                        </p>
                    </div>
                    <div style="float: left;margin-left: 5px" class="table_div">
                        <el-table :data="tableData" style="width: 1200px;height: 410px;">
                            <!-- <el-table-column type="selection" width="55" /> -->
                            <el-table-column property="ord_id" label="订单id" width="120" v-if="false">
                            </el-table-column>
                            <el-table-column property="" label="订单号" width="120">
                                <template #default="scope">
                                    <el-button link type="primary" @click="XQ(scope.row.ord_number, scope.row.ord_id)">
                                        {{ scope.row.ord_number }}
                                    </el-button>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column property="name" label="关联运单号" width="120" /> -->
                            <el-table-column property="ord_startaddress" label="始发地" width="120" />
                            <el-table-column property="ord_destination" label="目的地" width="120" />
                            <el-table-column property="client_name" label="客户名称" width="120" />
                            <el-table-column property="ord_state" label="订单状态" width="120">
                                <template #default="scope">
                                    <span>{{ formatOrderState(scope.row.ord_state) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column property="shipments_Contactname" label="发货人姓名" width="120" />
                            <el-table-column property="shipments_ContactPhone" label="发货人电话" width="120" />
                            <el-table-column property="shipments_addres" label="发货地址" width="120" />
                            <el-table-column property="receiving_Contactname" label="收货人姓名" width="120" />
                            <el-table-column property="receiving_ContactPhone" label="收货人电话" width="120" />
                            <el-table-column property="receiving_addres" label="收货地址" width="120" />
                            <el-table-column property="shipping_time" label="预计发货时间" width="120" />
                            <el-table-column property="receiving_time" label="预计收货时间" width="120" />
                            <!-- <el-table-column property="ord_type" label="订单类型" width="120" /> -->
                            <el-table-column property="ord_source" label="货物类型" width="120" />
                            <el-table-column property="count" label="货物数量" width="120" />
                            <el-table-column property="totalvolume" label="总体积" width="120" />
                            <el-table-column property="weight" label="总重量" width="120" />
                            <el-table-column property="freight_count" label="运费合计" width="120" />
                            <el-table-column property="ord_source" label="订单来源" width="120" />
                            <el-table-column property="ord_remark" label="订单备注" width="120" />
                            <el-table-column property="ord_time" label="下单时间" width="120" />
                            <el-table-column property="create_by" label="创建人" width="120" />
                            <el-table-column property="create_time" label="创建时间" width="120" />
                            <el-table-column label="操作" width="120">
                                <template #default="scope">
                                    <el-button link type="primary" size="small" @click="dd(scope.row.ord_id,scope.row.ord_state)">
                                        调度
                                    </el-button>
                                    <el-button link type="primary" size="small"
                                        @click="XQ(scope.row.ord_number, scope.row.ord_id)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <el-pagination style="float: right;margin-top: 10px;" v-model:current-page="currentPage"
                        v-model:page-size="PageSize" :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled"
                        :background="background" layout="total, sizes, prev, pager, next, jumper" :total="count"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { Search } from '@element-plus/icons-vue'
import router from '@/router';
import $http from '@/axios/base.js';
import { createLogger } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus'
//import { ta } from 'element-plus/es/locale';
export default {
    setup() {
        let ddzt = ref('');   //订单状态的值
        let sfd = ref('');   //始发地的值
        let mdd = ref('');   //目的地的值
        let xsrq = ref('');   //下单时间的值
        let ss = ref('');  //搜索框的值
        let currentPage = ref(1);
        let PageSize = ref(10);
        let tableData = ref([]);
        let count = ref();   //订单总数
        let DDZTvalue = ref([]);  //订单状态下拉框的值
        let Addressvalue = ref([]);  //始发地和目的地的值

        const background = ref(false);
        const disabled = ref(false);

        let disabled2 = ref(true);

        onMounted(() => {
            show();
            OrderCount();
            StstusShow();
            Address();
        })

        const options = [
            {
                value: 'Option1',
                label: 'Option1',
            },
            {
                value: 'Option2',
                label: 'Option2',
            }
        ]

        function show() {
            axios.get("http://localhost:5261/api/Order/GetOrders?currentPage=" + currentPage.value + "&PageSize=" + PageSize.value).then((res) => {
                tableData.value = res.data;
                console.log(tableData.value);
                tableData.value.forEach(item => {
                    item.create_time=new Date(item.create_time).toISOString().slice(0, 10);
                    item.ord_time=new Date(item.ord_time).toISOString().slice(0, 10);
                    item.receiving_time=new Date(item.receiving_time).toISOString().slice(0, 10);
                    item.shipping_time=new Date(item.shipping_time).toISOString().slice(0, 10);
                });
                show13();
            }).catch((err) => {
                console.log("错误：" + err)
            })
        }

        function OrderCount() {
            // axios.get("http://localhost:5261/api/Order/Count").then((res) => {
            //     count.value = res.data;
            //     console.log(count.value);
            // }).catch((err) => {
            //     console.log("错误：" + err);
            // })
            let zhi = ddzt.value;
            if (ddzt.value == "") {
                zhi = 0;
            }
            $http.get(`http://localhost:5261/api/Order/Count/${zhi}`, {
                params: {
                    Ord_startaddress: sfd.value,
                    Ord_destination: mdd.value,
                    Ord_time: xsrq.value,
                    Client_name: ss.value
                }
            }).then((res) => {
                count.value = res;
                console.log(count.value);
            }).catch((err) => {
                console.log("错误:" + err)
            })
        }


        function handleSizeChange(val) {
            PageSize.value = val;
            //console.log(PageSize.value);
            show();
        }

        function handleCurrentChange(val) {
            currentPage.value = val;
            //alert(currentPage.value);
            show();
        }

        function CZ() {   //重置
            ddzt.value = "";
            sfd.value = "";
            mdd.value = "";
            xsrq.value = "";
            ss.value = "";
            show();
            OrderCount()
        }

        function StstusShow() {  //订单下拉框绑定
            axios.get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Ow_status").then((res) => {
                DDZTvalue.value = res.data;
                console.log(DDZTvalue.value);
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }


        function Address() {   //始发地和目的地的绑定值
            axios.get("http://localhost:5261/api/Children/GetChildrens").then((res) => {
                Addressvalue.value = res.data;
                console.log(Addressvalue.value);
            }).catch((err) => {
                console.log("错误：" + err);
            })
        }


        function formatOrderState(status) {
            switch (status) {
                case 1:
                    return '待接单';
                case 2:
                    return '待提货';
                case 3:
                    return '待发车';
                case 4:
                    return '运输中';
                case 5:
                    return '待签收';
                case 6:
                    return '已完成';
                case 7:
                    return '已取消';
                case 8:
                    return '已拒绝';
                case 9:
                    return '待调度'
                default:
                    return '未知状态';
            }
        }

        function XQ(ord_number, id) {
            router.push({ path: '/XQ', query: { ord_number, id } })
        }

        function Get() {
            let zhi = ddzt.value;
            if (ddzt.value == "") {
                zhi = 0;
            }
            axios.get("http://localhost:5261/api/Order/GetOrders_conditions?Ord_state=" + zhi +
                "&Ord_startaddress=" + sfd.value + "&Ord_destination=" + mdd.value + "&Ord_time=" + xsrq.value + "&Client_name=" + ss.value +
                "&currentPage=" + currentPage.value + "&PageSize=" + PageSize.value).then((res) => {
                    tableData.value = res.data;
                    console.log(tableData.value);
                    OrderCount();
                }).catch((err) => {
                    console.log("错误:" + err);
                })
        }

        function dd(id,state) {   //调度
            if(state==9){
                router.push({ path: '/DDGLDD', query: { id } });
            }else{
                ElMessage.warning("已调度");
            }
        }

        function KD() {
            router.push('/KD')
        }

        function show13() {
            // tableData.value.forEach((item, index)=>{
            //     if(tableData.value[index].ord_state!='9'){
            //         disabled2.value=false;
            //     }else{
            //         disabled2.value=true;
            //     }
            // })
        }

        return {
            ddzt,
            sfd,
            mdd,
            xsrq,
            ss,
            Search,
            CZ,
            options,
            tableData,
            currentPage,
            PageSize,
            count,
            handleSizeChange,
            handleCurrentChange,
            background,
            disabled,
            DDZTvalue,
            Addressvalue,
            status,
            formatOrderState,
            XQ,
            Get,
            dd,
            KD,
            disabled2
        }
    }
}
</script>

<style scoped>
.el-header {
    padding-top: 20px;
    /* background-color: #00ff00; */
}

/* .el-main {
    background-color: #00E5EE;
} */

.main {
    margin-left: 30px;

}

.common-layout {
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    background-color: #F5F9FF;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
}

.span {
    height: 1500px;
}

.title {
    padding-right: 1070px;
}

.table_div {
    margin-top: 15px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
</style>